﻿@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<div class="left-aligned-section">
    <ul data-bind="foreach: Users()">
        <li>
            <div class="user-item-border">
                <div>
                    <label data-bind="text: Name"></label>
                </div>
                <div>
                    <label data-bind="text: Email"></label>
                </div>
                <div>
                    <a href="#" class="show-details">Show Details</a>
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="right-aligned-section" data-bind="with: SelectedUser">
    <div class="address-header">
        <div class="left-aligned-div"><strong>Address for&nbsp;</strong></div>
        <div class="left-aligned-div" data-bind="text: Name"></div>
    </div>
    <ul data-bind="foreach: Addresses">
        <li>
            <div class="address-item-border">
                <div>
                    <div class="address-label">Street: </div>
                    <div style="font-weight: bold" data-bind="text: Street"></div>
                </div>
                <div>
                    <div class="address-label">House: </div>
                    <div style="font-weight: bold" data-bind="text: House"></div>
                </div>
                <div>
                    <div class="address-label">City: </div>
                    <div style="font-weight: bold" data-bind="text: City"></div>
                </div>
                <div>
                    <div class="address-label">State: </div>
                    <div style="font-weight: bold" data-bind="text: State"></div>
                </div>
                <div>
                    <div class="address-label">Country: </div>
                    <div style="font-weight: bold" data-bind="text: Country"></div>
                </div>
                <div>
                    <div class="address-label">Zip: </div>
                    <div style="font-weight: bold" data-bind="text: Zip"></div>
                </div>
            </div>
        </li>
    </ul>
</div>
@section scripts {
    @Scripts.Render("~/Scripts/addressbook-vm.js")
    @Scripts.Render("~/Scripts/addressbook-client.js")
}